<template>
  <l-layout class="l-tab-page">
    <!-- <template #left>
      <l-panel style="padding-right: 0">
        <template #title>
          {{ $t("开发模版分类") }}
          <div class="tree-setting-btn">
            <el-tooltip effect="dark" content="分类管理" placement="top">
              <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
            </el-tooltip>
          </div>
        </template>
        <el-tree
          ref="tree"
          v-loading="treeLoading"
          node-key="id"
          :highlight-current="true"
          :data="schemeTypes"
          @node-click="handleNodeClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="el-icon-notebook-2"></i>
            {{ node.label }}
          </span>
        </el-tree>
      </l-panel>
    </template> -->
    <l-panel style="padding-left: 0">
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input
            :placeholder="$t('请输入要查询关键字')"
            @keyup.enter.native="hanleSearch"
            v-model="searchWord"
            size="mini"
          >
            <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </template>
      <l-table
        :columns="columns"
        :dataSource="tableData"
        row-key="f_Id"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <template v-slot:f_CreateTime="scope">
          {{ lr_dateFormat(scope.row.f_CreateTime) }}
        </template>
        <template v-slot:f_Classify="scope">
          {{ (schemeTypes.find((t) => t.value == scope.row.f_Classify) || {}).label || "" }}
        </template>
        <template v-slot:f_EnabledMark="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.f_EnabledMark"
            @change="handleEnableChange(scope.row)"
          >
          </el-switch>
        </template>
        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>

    <!--模版分类-->
    <!-- <l-drawer
      :title="$t('模版分类管理')"
      :visible.sync="schemeTypeVisible"
      :showOk="false"
      :showClose="false"
      size="800px"
      @closed="schemeTypeClosed"
    >
      <scheme-type></scheme-type>
    </l-drawer> -->
  </l-layout>
</template>

<script>
const apiSchemeType = window.$api.codetool.schemeType;
const apiScheme = window.$api.codetool.scheme;

//import SchemeType from "../schemeType/index.vue";
export default {
  // components: {
  //   SchemeType,
  // },
  data() {
    return {
      schemeTypeVisible: false,
      schemeTypes: [],
      treeCategory: "",

      //查询
      searchWord: "",
      columns: [{ label: "名称", prop: "f_Name", minWidth: "150" }],
      tableBtns: [{ prop: "Import", label: "导入" }],
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,
      tableData: [],
      currentScheme: {},
      loadScheme: false,

      treeLoading: false,
      schemeVisible: false,
      scheme: "",
      formSchemeData: {
        f_Name: "",
        f_Classify: "",
      },
      schemeRules: {
        f_Name: [{ required: true, message: "请输入模版名称" }],
        f_Classify: [{ required: true, message: "请选择模版分类" }],
      },
    };
  },
  methods: {
    async loadData() {
      //await this.getSchemeTypes();
      await this.loadTablePage();
    },

    loadTablePage(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        keyword: this.searchWord,
      };
      apiScheme
        .request(`${this.apiUrl}custmerform/module/page`, "get", queryData)
        .then((res) => {
          const data = this.$deepClone(res.data.data);
          this.tableData = data.rows;
          this.tableTotal = data.records;
        })
        .catch(() => {
          this.tableData = [];
        });
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTablePage(true);
    },
    hanleSearch() {
      this.loadTablePage();
    },
    handleNodeClick(node) {
      this.treeCategory = node.value;
      this.tableCurrentPage = 1;
      this.loadTablePage();
    },
    async handleImport($index, row) {
      //导入模板
      const result = await apiScheme.request(`${this.apiUrl}codetool/gettemplatebyformmoduleid`, "get", {
        formModuleId: row.f_Id,
      });
      const data = this.$deepClone(result.data.data);
      try {
        const formInfo = JSON.parse(data.formInfo);
        const page = JSON.parse(data.page);
        console.log("formInfo", formInfo);
        const primaryKey = formInfo.primaryKey;
        const mainTable = formInfo.designDbTables.find((t) => t.type == "main");
        const mainKey = mainTable.columns.find((t) => t.name == primaryKey);
        mainKey.isPrimary = true;
        const params = {
          db: formInfo.db || [],
          dbCode: data.dbCode,
          dbTable: formInfo.designDbTables || [],
          formInfo: formInfo.formInfo || {},
          formType: formInfo.formType || 1,
          page,
          menu: data.menu || {},
          moduleId: data.moduleId || "",
          moduleName: data.moduleName || "",
        };
        console.log("handleImport", params);
        this.$emit("load", params);
        this.$message({
          type: "success",
          message: "导入成功",
        });
      } catch (e) {
        console.log(e);
        this.$message({
          type: "error",
          message: "导出失败",
        });
      }
    },

    async getSchemeTypes() {
      const data = await this.$awaitWraper(apiSchemeType.getListProjectId());
      this.schemeTypes = (data || []).map((t) => {
        return { label: t.f_Name, value: t.f_Value };
      });
    },
    handleSettingClick() {
      this.schemeTypeVisible = true;
    },
    schemeTypeClosed() {
      this.getSchemeTypes();
    },
  },
};
</script>
